<template>
	<view>
		<view class="car_box">
			<view class="car_title">
				<view :class="['iconfont',carList.icon.name]" :style="{color: carList.icon.color}">
				</view>
				<view style="width: 100%;" class="title" @click="myclick">
					<view class="a-c">
						{{carList.title}}
					</view>
					<view class="item_upkeep">
						{{carList.upkeepName}}
					</view>
				</view>
			</view>
			<view class="car_list" v-if="carList.data[0].width!=''">
				<view class="car_item" v-for="(item,index) in carList.data" :key='index' :style="{backgroundColor:item.warnColoe}">
					<view class="item_title" :style="{color:item.backColor}">
						<view class="iconfont iconjinzhi" v-if="item.upkeep">
							
						</view>
						<view class="a-c">
							{{item.name}}
						</view>
					
					</view>
					<view class="item_rate">
						<view class="rate_bg">
							<view class="rate" ref='rate' :animation="item.animet" :style="{backgroundColor:item.backColor,width:item.width}">
							</view>
						</view>
						<view class="day" :style="{color:item.backColor,borderBottom:item.upkeep?'1px solid '+item.backColor:''}">
							{{item.upkeep==true?'前往监测':'预计'+ item.time +'天后'}}
						</view>
					</view>
					<view class="item_title_bottom">
						<view class="title_left">
							1次/{{item.oneKm}}万公里
						</view>
						<view class="title_right">
							{{item.nowKm}}万公里
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			carList: {
				type: Object
			}
		},
		data() {
			return {
				animationData: {},
				width: '0',
				animation: null,
				ceshi1: false
			};
		},

		created() {

		},
		watch: {
			'carList': {
				handler: (newV, oldV) => {
					var animation = uni.createAnimation({
						duration: 400,
						timingFunction: 'ease',
					})
					newV.data.forEach(item => {
						animation.width(0).step().width(item.width).step()
						item.animet = animation.export();
					})
				},
				deep: true,
				immediate: true
			}
		},
		mounted() {

		},
		onShow() {},
		methods: {
			myclick() {
				var animation = uni.createAnimation({
					duration: 400,
					timingFunction: 'ease',
				})
				this.carList.data.forEach(item => {
					animation.width(0).step().width(item.width).step()
					item.animet = animation.export();
				})

			},
		}
	}
</script>

<style lang="scss">
	.car_box {
		background-color: #FFFFFF;
		padding-top: 36rpx;
		padding-bottom: 34rpx;
		width: 700rpx;
		border-radius: 22rpx;
		margin: 0 auto;
		font-size: 22rpx;
		margin-bottom: 20rpx;
		margin-bottom: 26rpx;
		.item_upkeep{
			width:126rpx;
			height:38rpx;
			border-radius:19rpx;
			border:2rpx solid rgba(252,43,39,1);
			text-align: center;
			line-height: 36rpx;
			color: #FC2B27;
		}
		.car_list {

			.car_item {
				border-bottom: 1px solid #ccc;
				padding-bottom: 18rpx;
				margin-bottom: 30rpx;

				.item_title {
					margin-bottom: 6rpx;
					padding-left: 40rpx;
					padding-right: 40rpx;
					padding-top: 12rpx;
					display: flex;
					align-items: center;
				}
				.item_rate {
					padding-left: 40rpx;
					padding-right: 40rpx;
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;

					.rate_bg {
						width: 462rpx;
						height: 16rpx;
						background: rgba(235, 235, 235, 1);
						border-radius: 8rpx;
						margin-right: 30rpx;
						position: relative;

						.rate {
							width: 0;
							height: 16rpx;
							background: rgba(42, 168, 69, 1);
							border-radius: 8rpx;
							position: absolute;
							top: 0;
							left: 0;
						}
					}

					.day {
						color: #4C4C4C;
						font-size: 22rpx;
					}
				}

				.item_title_bottom {
					padding-left: 40rpx;
					padding-right: 40rpx;
					color: #4C4C4C;
					font-size: 22rpx;
					display: flex;
					align-items: center;

					.title_left {
						margin-right: 20rpx;
					}
				}
			}
		}

		.car_title {
			display: flex;
			align-items: center;
			margin-bottom: 26rpx;
			padding-left: 40rpx;
			padding-right: 40rpx;

			.title {
				margin-left: 12rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

		}
	}
</style>
